Chart Configuration এবং Data Binding

ExtJS তে Charts একটি শক্তিশালী উপাদান, যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। Chart Configuration এবং Data Binding ব্যবহার করে আপনি বিভিন্ন ধরনের চার্ট (যেমন, বার চার্ট, পাই চার্ট, লাইন চার্ট) তৈরি করতে পারেন, এবং ডেটার সাথে চার্ট যুক্ত করতে পারেন। ExtJS এর চার্ট সিস্টেম ডেটাকে সহজে প্রদর্শন করতে এবং ইউজারের জন্য ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সাহায্য করে।

১. Chart Configuration

ExtJS এর Chart Configuration এর মাধ্যমে আপনি বিভিন্ন ধরনের চার্ট কনফিগার এবং কাস্টমাইজ করতে পারবেন। ExtJS এর Chart কম্পোনেন্টে বিভিন্ন প্রপার্টি ও কনফিগারেশন থাকতে পারে যেমন:

• xtype: চার্টের ধরন নির্ধারণ করে (যেমন cartesian, pie ইত্যাদি)।
• store: ডেটা সোর্স হিসেবে কাজ করে।
• series: চার্টের মধ্যে প্রদর্শিত তথ্যের ধরন কনফিগার করে (যেমন বার, লাইন, বা পাই চার্ট)।
• axes: এক্স-অ্যাক্স এবং ওয়াই-অ্যাক্স এর কনফিগারেশন।
• title: চার্টের শিরোনাম।

উদাহরণ: একটি সোজা লাইন চার্ট কনফিগার করা

Ext.create('Ext.chart.CartesianChart', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    store: {
        fields: ['year', 'data1', 'data2'],
        data: [
            { year: 2010, data1: 20, data2: 30 },
            { year: 2011, data1: 25, data2: 35 },
            { year: 2012, data1: 30, data2: 40 },
            { year: 2013, data1: 40, data2: 50 }
        ]
    },
    axes: [{
        type: 'numeric',
        position: 'left',
        title: 'Value'
    }, {
        type: 'category',
        position: 'bottom',
        title: 'Year',
        fields: ['year']
    }],
    series: [{
        type: 'line',
        xField: 'year',
        yField: ['data1', 'data2'],
        style: {
            lineWidth: 3,
            stroke: '#FF0000'
        }
    }],
    title: 'Annual Data Comparison'
});

ব্যাখ্যা:

• store: ডেটার সোর্স হিসেবে কাজ করে। এই উদাহরণে, এটি বছরের জন্য দুটি ডেটা সিরিজ ধারণ করছে (data1 এবং data2)।
• axes: এক্স এবং ওয়াই অ্যাক্স কনফিগার করা হয়েছে। xField এবং yField দ্বারা নির্দেশিত ডেটা ফিল্ডের সাথে সম্পর্কিত।
• series: লাইন চার্ট তৈরি করতে ব্যবহৃত। xField এবং yField চিহ্নিত করে কোন ডেটা অক্ষের উপর স্থাপন হবে।
• title: চার্টের শিরোনাম হিসেবে ব্যবহার করা হয়েছে।

২. Data Binding

Data Binding একটি খুবই গুরুত্বপূর্ণ ধারণা যা ExtJS চার্টে ডেটা এবং UI এর মধ্যে সম্পর্ক স্থাপন করতে সহায়ক। ExtJS এর Store এর মাধ্যমে ডেটা চার্টের মধ্যে যুক্ত করা হয় এবং যখন স্টোরের ডেটা পরিবর্তিত হয়, তখন চার্ট স্বয়ংক্রিয়ভাবে আপডেট হয়। এটি রিয়েল-টাইম ডেটা ভিজ্যুয়ালাইজেশনে সহায়ক।

উদাহরণ: Data Binding এর মাধ্যমে চার্ট আপডেট করা

Ext.create('Ext.chart.CartesianChart', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    store: {
        fields: ['month', 'sales'],
        data: [
            { month: 'Jan', sales: 10 },
            { month: 'Feb', sales: 15 },
            { month: 'Mar', sales: 20 },
            { month: 'Apr', sales: 25 }
        ]
    },
    axes: [{
        type: 'numeric',
        position: 'left',
        title: 'Sales'
    }, {
        type: 'category',
        position: 'bottom',
        title: 'Month',
        fields: ['month']
    }],
    series: [{
        type: 'bar',
        xField: 'month',
        yField: 'sales',
        style: {
            fill: '#00FF00'
        }
    }],
    title: 'Monthly Sales Data'
});

// ডেটা আপডেট করার জন্য:
var chartStore = Ext.getCmp('chartID').getStore();
chartStore.loadData([
    { month: 'May', sales: 30 },
    { month: 'Jun', sales: 35 }
], true);

ব্যাখ্যা:

• store: গ্রিডের মত, স্টোর চার্টে ডেটা ধারণ করে। এখানে sales ডেটা বাইন্ড করা হয়েছে।
• loadData: loadData মেথড ব্যবহার করে নতুন ডেটা যুক্ত করা হয়। এখানে, চার্টের ডেটা "May" এবং "Jun" এর জন্য আপডেট করা হচ্ছে।

৩. Chart Types

ExtJS বিভিন্ন ধরনের চার্ট প্রকার সমর্থন করে, এবং আপনি যেকোনো একাধিক প্রকারে ডেটা ভিজ্যুয়ালাইজ করতে পারেন। নিচে কয়েকটি জনপ্রিয় চার্ট টাইপের উদাহরণ দেওয়া হল:

1. Bar Chart (বার চার্ট)

series: [{
    type: 'bar',
    xField: 'category',
    yField: 'value'
}]

2. Pie Chart (পাই চার্ট)

Ext.create('Ext.chart.PolarChart', {
    store: store,
    series: [{
        type: 'pie',
        angleField: 'value',
        label: {
            field: 'category'
        }
    }]
});

3. Line Chart (লাইন চার্ট)

series: [{
    type: 'line',
    xField: 'date',
    yField: 'value'
}]

4. Radar Chart (রাডার চার্ট)

series: [{
    type: 'radar',
    xField: 'category',
    yField: 'value'
}]

৪. Chart Configuration এবং Styling

ExtJS এর চার্ট কনফিগারেশনে styling এবং themes সংযোজন করতে পারেন। এটি ডেটার ভিজ্যুয়াল অ্যাপিয়ারেন্স কাস্টমাইজ করতে সহায়ক।

series: [{
    type: 'bar',
    xField: 'category',
    yField: 'value',
    style: {
        fill: '#00FF00',
        lineWidth: 3
    }
}]

এখানে, fill ব্যবহার করে বার চার্টের বর্ণ পরিবর্তন করা হয়েছে এবং lineWidth দ্বারা বর্ডারের পুরুত্ব নির্ধারণ করা হয়েছে।

সারাংশ

• Chart Configuration: ExtJS চার্টের কনফিগারেশন এর মাধ্যমে বিভিন্ন ধরনের চার্ট তৈরি করা যায় যেমন লাইন চার্ট, বার চার্ট, পাই চার্ট ইত্যাদি।
• Data Binding: স্টোরের মাধ্যমে ডেটা চার্টে যুক্ত করা হয় এবং স্টোরে ডেটা পরিবর্তিত হলে চার্টও স্বয়ংক্রিয়ভাবে আপডেট হয়।
• Customization: ExtJS চার্টে কাস্টম স্টাইল এবং থিম সেট করার মাধ্যমে আপনি চার্টের চেহারা এবং অনুভূতি কাস্টমাইজ করতে পারেন।

ExtJS তে Chart Configuration এবং Data Binding ফিচারটি ডেটা ভিজ্যুয়ালাইজেশন আরও উন্নত এবং ইন্টারঅ্যাকটিভ করার জন্য খুবই কার্যকরী।